<template>
  <div id="app">
    <transition  style="z-index: 999" :name="transitionName">
      <router-view class="transitionBody"></router-view>
    </transition>
<!--    <step-guide @closeFirstLogin="closeFirstLogin" v-if="isFirst"></step-guide>-->
<!--    <div>-->
<!--      <router-view></router-view>-->
<!--      <TabBar v-if="isShow"></TabBar>-->
<!--    </div>-->

  </div>
</template>



<script>

import {getItem} from "@/utils/auth";
export default {

  data(){
    return{
      transitionName: 'transitionLeft',
      routes:true,
      isShow:false,
      isFirst:false
    }
  },

  mounted() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      this.routes = true
    } else {
      this.routes = false
    }
    if (/reg|shares|login/.test(location.href)){
      this.isShow=false
    }else {
      this.isShow = true
    }
  },


}
</script>


<style scoped lang="scss">
#app{
  overflow: hidden;
}
.transitionBody {
  transition: all 0.3s ease-out;
}

.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.transitionLeft-enter-active,
.transitionRight-enter-active {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>